<!doctype html>
<html>

<head>
  <title>Socket.IO chat</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font: 13px Helvetica, Arial;
    }

    form {
      background: #000;
      padding: 3px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    form input {
      border: 0;
      padding: 10px;
      width: 90%;
      margin-right: .5%;
    }

    form button {
      width: 9%;
      background: rgb(130, 224, 255);
      border: none;
      padding: 10px;
    }

    #messages {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    #messages li {
      padding: 5px 10px;
    }

    #messages li:nth-child(odd) {
      background: #eee;
    }

    #messages {
      margin-bottom: 40px
    }
  </style>
</head>

<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script src="static/socket.io-1.2.0.js"></script>
  <script src="static/jquery-1.11.1.js"></script>
  <script>
    $(function() {
      var uid = Date.parse(new Date());
      var socket = io("localhost:3000");
      $('form').submit(function() {
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('connect', function(){
        console.log(uid);
      	socket.emit('login', uid);
      });
      socket.on('chat message', function(msg) {
        $('#messages').append($('<li>').text(msg));
        window.scrollTo(0, document.body.scrollHeight);
      });
    });
  </script>
</body>

</html>
